import * as React from 'react';
import {observer} from 'mobx-react'
import styles from './index.scss';
import mNew from '../../../assets/imgs/test/mNew.png'

import Map from '../../home/Map'
import {INorthEastType, IWaringType} from "../../../type/firstType";
import FirstStore from '../../../store/firstStore'
import {observable} from "mobx";

interface IProps {
    northEastArea: INorthEastType
    northArea: INorthEastType
    westArea: INorthEastType
    eastArea: INorthEastType
    southArea: INorthEastType
    waringLight: {
        data_red: IWaringType[],
        data_yellow: IWaringType[]
    }
}

@observer
class Home extends React.Component<IProps> {

    constructor(props) {
        super(props);
    }

    public child: any

    @observable
    public selected: string[] = ['SMX','LOG']

    public handleRef = (node) => {
        this.child = node
    }

    // 控制点击事件
    public handleClick = (text: string) => {
        const {waringLight} = this.props
        if (this.selected.indexOf(text) !== -1) {
            const index = this.selected.indexOf(text)
            this.selected.splice(index, 1)
            switch (text) {
                case 'SMX':
                    FirstStore.redArr = []
                    FirstStore.yellowArr = []
                    break;
                case 'LOG':
                    FirstStore.redArrLog = []
                    FirstStore.yellowArrLog = []
                    break;
                case 'LOGISTICS':
                    FirstStore.flyLineOne = []
                    break;
            }
            this.child.newData()
        } else {
            this.selected.push(text)
            switch (text) {
                case 'SMX':
                    waringLight.data_red.forEach((item) => {
                        FirstStore.redArr.push([item.Longitude, item.Latitude])
                    })
                    waringLight.data_yellow.forEach((item) => {
                        FirstStore.yellowArr.push([item.Longitude, item.Latitude])
                    })
                    break;
                case 'LOG':
                    FirstStore.waringLightLog.forEach((item) => {
                        if (item.warning === 'Critical') {
                            FirstStore.redArrLog.push([item.Longitude, item.Latitude])
                        } else {
                            FirstStore.yellowArrLog.push([item.Longitude, item.Latitude])
                        }
                    })
                    break;
                case 'LOGISTICS':
                    console.log('点击了日志看飞线图是把')
                    FirstStore.flyLineOne = FirstStore.flyLine
                    break;
            }
            this.child.newData()
        }
    }


    public render() {
        const {northEastArea, eastArea, southArea, westArea, northArea} = this.props
        return (
            <div className={styles.map}>
                <p className={styles.title}>放疗设备智联服务平台</p>
                <div className={styles.mapC}>
                    <div className={styles.back} />
                    <div className={styles.rotate} />
                    <div className={styles.rotateReverse} />
                    <div className={styles.mapCC}>
                        <img src={mNew} className={styles.img} />
                    </div>
                    <Map northArea={northArea} northeastArea={northEastArea} ref={this.handleRef}
                         southArea={southArea} westArea={westArea} eastArea={eastArea} />
                </div>
                <div className={styles.C}>
                    <div className={styles.left}
                         style={{color: this.selected.indexOf('SMX') !== -1 ? 'rgba(142,228,254,1)' : 'rgba(20,19,47,1)'}}
                         onClick={this.handleClick.bind(this, 'SMX')}>SMX
                    </div>
                    <div className={styles.mid}
                         style={{color: this.selected.indexOf('LOG') !== -1 ? 'rgba(142,228,254,1)' : 'rgba(20,19,47,1)'}}
                         onClick={this.handleClick.bind(this, 'LOG')}>LOG
                    </div>
                    <div className={styles.right}
                         style={{color: this.selected.indexOf('LOGISTICS') !== -1 ? 'rgba(142,228,254,1)' : 'rgba(20,19,47,1)'}}
                         onClick={this.handleClick.bind(this, 'LOGISTICS')}>LOGISTICS
                    </div>
                </div>
            </div>
        );
    }
}

export default Home;
